<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗盘时钟</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
    <div class="wrapper">
        <div class="focus"></div>
    </div>
    <div id="app">
        <div class="contact"></div>
    </div>
    <script>
        // 动态加载图片并设置 CSS 变量
        const imageFolder = 'img'; // 图片文件夹路径
        const imageCount = 21; // 图片数量
        const focusElement = document.querySelector('.focus');

        for (let i = 0; i < imageCount; i++) {
            const img = new Image();
            //检索规则
            img.src = `${imageFolder}/${i + 1}.${i < 13 ? 'jpeg' : 'jpg'}`;
            img.onload = () => {
                focusElement.style.setProperty(`--bg-image-${i}`, `url(${img.src})`);
            };
        }

        // 动态生成关键帧
        function createKeyframes(imageCount) {
            let keyframes = '';
            const step = 100 / (imageCount - 1);
            for (let i = 0; i < imageCount; i++) {
                keyframes += `${i * step}% { background-image: var(--bg-image-${i}); animation-timing-function: cubic-bezier(0.95, 0.00, 0.05, 1.00); }\n`;
            }
            return keyframes;
        }

        const styleSheet = document.styleSheets[0];
        styleSheet.insertRule(`@keyframes focus { ${createKeyframes(imageCount)} }`, styleSheet.cssRules.length);
        styleSheet.insertRule(`@-webkit-keyframes focus { ${createKeyframes(imageCount)} }`, styleSheet.cssRules.length);
    </script>
    <script src='/js/jquery.min.js'></script>
    <script src='/js/TweenMax.min.js'></script>
    <script src="/js/index.js"></script>
</body>

</html>